<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <include file="./Addons/IdouTicket/View/Public/common/header.html" />
    <title>物流轨迹</title>
    <style type="text/css">
        body, html {
            background-color: #f4f4f4;
            max-width: 480px;min-width: 0;margin: 0 auto;
        }
        div{
            box-sizing: border-box;
        }
        .fbox{
            position: relative;
        }
        .mapp{
            width: 100%;
            height: 255px;
        }
        .mainbox{
            position: absolute;
            top: 220px;
            background-color: #fff;
            width: 100%;
            border-radius: 20px;
            padding: 10px;
        }
        .mainbox .mbtop img{
            width: 25px;
            height: 25px;
            vertical-align: middle;
            margin-right: 10px;
            display: inline-block;
            border-radius: 3px;
        }
        .mainbox .mbtop{
            color: #010103;
            font-size: 15px;
            clear: both;
            margin-top: 4px;
        }
        .orderaddr{
            clear: both;
            display: flex;
            align-items: center;
        }
        .orderaddr .img{
            width: 25px;
            height: 25px;
            margin-right: 13px;
            display: inline-block;
        }
        .orderaddr .img img{
            width: 100%;
            height: 100%;
        }
        .orderaddr .cont{
            flex: 1;
            color: #010103;
            font-size: 15px;
            overflow: hidden;
        }
        .cont-two{
            white-space: pre-wrap; 
            overflow: hidden;
            text-overflow: ellipsis; 
        }
        .line{
            border-top: 1px solid #ebebeb;
            width: 100%;
            margin-top: 10px;
                margin-bottom: 10px;
        }
        .wldetail{
            color: #9f9f9f;
            font-size: 15px;
            min-height: 450px;
 
        }
        .wldetail .item {
            position: relative;
            margin-left: 20px; /* 确保有足够的空间显示线和圆 */
            padding-left: 20px; /* 确保文本不会覆盖到圆 */
            border-left: 1px solid #d4d4d4; /* 左侧的灰色线 */
            padding: 10px 20px;
        }
 
        .wldetail .item:before {
            content: "";
            position: absolute;
            left: -4px; /* 调整圆的位置，‌使其部分位于容器外部 */
            top: 50%;
            transform: translateY(-50%); /* 垂直居中 */
            width: 8px;
            height: 8px;
            background-color: #d4d4d4;
            border-radius: 50%; /* 圆形 */
            z-index: 1
        }
 
        .wldetail .item:first-child {
            border-left: none;
            color: #3eb32c;
        }
 
        .wldetail .item:first-child:before {
            background-color: green;
                border: 2px solid #8edc84;
        }
 
        .wldetail .item:first-child:after {
            content: "";
            position: absolute;
            left: 0;
            bottom: 0;
            width: 1px;
            height: 50%;
            background-color: #d4d4d4;
            z-index: 0
        }
        .nodata{
            font-size: 15px;
            color: #9f9f9f;
            text-align: center;
        }
    </style>
</head>
<body> 
    <div class="fbox">
        <div class="mainmap">
            <iframe src="{$wudata[0].wldetail.trailUrl}" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0" class="mapp"></iframe>
        </div>
        <div class="mainbox">
            <div class="mbtop">
                <img src="http://qiniuyun.rongxinhuicheng.com.cn/609_png1663846265396.png">
                <span>{$wudata[0].wlname} ： {$wudata[0].wuliu_id}</span>
            </div>
            <div class="line"></div>
            <div class="orderaddr">
                <div class="img">
                    <img src="http://qiniuyun.rongxinhuicheng.com.cn/609_png1722859301331.png">
                </div>
                <div class="cont">
                    <div>订单编号：{$uinfo.orderum}</div>
                    <div class="cont-two">收货地址：{$uinfo.so_addr_mess}</div>
                </div>
            </div>
            <div class="line"></div>
            <!-- 物流信息详细 -->
            <div class="wldetail">
                <eq name="wudata[0][wldetail][status]" value="200">
                        <volist name="wudata[0][wldetail][data]" id="vo">
                            <div class="item">
                                <div class="text">{$vo.context}</div>
                                <div class="ctime">{$vo.time}</div>
                            </div>
                        </volist>
                    <else/>
                        <div class="nodata">{$wudata[0].wldetail.message}</div>
                </eq>
            </div>
        </div>
    </div>
</body>
<script src="{:HOMEJS}common/jquery.min.js"></script>
<script type="text/javascript">
 
</script>
</html>